<template>
  <div>
    <h1>{{ msg }}</h1>
    <h1>{{ $store.state.count }}--{{ count }}</h1>
    <p>
      <button @click="$store.commit('add')">+</button>

      <button @click="$store.commit('reduce')">-</button>
    </p>
  </div>
</template>
<script>
import store from "@/vuex/store";
import { mapState } from "vuex";
//
export default {
  data() {
    return {
      msg:
        "你好，初次使用vuex，他主要用来存储数据代替session用，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。vuex是采用集中式管理所有组件依赖的数据一个工具，可以解决不同组件数据共享问题。"
    };
  },
  // eslint-disable-next-line no-undef
  store,
  computed: mapState(["count"])
};
</script>
